<template>
    <div style="border: 1px solid black">
       <div v-for="(p,index) in tushus" :key="p.url" style="float: left">
           <img :src="p.url" alt="" style="width: 200px;
height: 200px;">
           <br>
           价格 <span> {{p.price}} </span>
       </div>
        <div v-for="(p,index) in tushus" :key="p.url" style="float: left">
            <img :src="p.url" alt="" style="width: 200px;
height: 200px;">
            <br>
            价格 <span> {{p.price}} </span>
        </div>
        <div v-for="(p,index) in tushus" :key="p.url" style="float: left">
            <img :src="p.url" alt="" style="width: 200px;
height: 200px;">
            <br>
            价格 <span> {{p.price}} </span>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "All",
        data(){
            return{
                tushus:[{
                    url:'',
                    price:''
                }]
            }
        },
created() {
    axios.get("http://localhost:8080/tushu.json").then(
        (response) => {
            console.log("请求成功", response.data);
            this.tushus=response.data
        },
        (error) => {
            console.log("请求失败", error.message);
        }
    );
}
    }
</script>

<style scoped>
img{
    margin: 20px 80px;
}
</style>